<template>
  <div class="service-wrap">
    <div class="problem-box">
      <div class="bg-box"></div>
      <div class="problem-con">
        <div class="title" v-for="(item,index) in problemList" :key="index">{{item}}</div>
      </div>
      <div class="back-box">
        <img src="./back.png" class="back" @click="toPage" onclick="return false"/>
      </div>
    </div>

    <div class="problem-wrap" ref="wrapper">
      <div class="problem-con">
        <div class="server"><img src="./icon1.png" class="icon1" onclick="return false"/></div>
        <div class="problem">
          <div class="word">Hi,{{nickname}}，使用蓝聘过程中遇到问题记得找我呦!</div>
          <div class="blank-box"><img src="./left.png" class="left" onclick="return false"/></div>
        </div>
      </div>
      <!--聊天记录-->
      <div class="talk-box" v-for="(item,index) in chatList" :key="index">
        <div class="answer-con">
          <div class="answer">
            <div class="word">{{item.problem}}</div>
            <div class="blue-box"><img src="./right.png" class="right" onclick="return false"/></div>
          </div>
          <div class="server"><img src="./icon2.png" class="icon2" onclick="return false"/></div>
        </div>

        <div class="problem-con">
          <div class="server"><img src="./icon1.png" class="icon1" onclick="return false"/></div>
          <div class="problem">
            <div class="word">{{item.answer}}</div>
            <div class="blank-box"><img src="./left.png" class="left" onclick="return false"/></div>
          </div>
        </div>
      </div>
    </div>

    <div class="speak-box">
      <div class="search-con">
        <input type="text" placeholder="请输入你要咨询的问题" class="content" v-model="value" @blur="inputBlur"/>
        <img src="./pen.png" class="icon"/>
      </div>
      <div class="btn-box" @click="send">发送</div>
    </div>

    <div class="mobile-box" @click="callPhone">
      <img src="./mobile.png" class="mobile"/>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env";
  import {setSessionStore, getSessionStore} from "../../common/js/util";

  export default {
    data() {
      return {
        problem: "",
        value: "",
        phoneNum: "",
        problemList: [],
        nickname: "",
        answer: "",
        talk: false,
        chatList: [],
        userSign: ""
      }
    },
    mounted() {
      this.nickname = getSessionStore("nickname");
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(getSessionStore("user_sign"));
      if (getSessionStore("chatList")) {
        this.chatList = JSON.parse(getSessionStore("chatList"));
      }
      this.queryProblem();
    },
    methods: {
      queryProblem() {//查询问题列表
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/customerser/query_problem?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.phoneNum = resultObj.data.telephone;
            let list = resultObj.data.list;
            if (list != null && list.length > 0) {
              for (let i = 0, length = list.length; i < length; i++) {
                this.problemList.push(list[i]);
                break;
              }
            }
            if (this.problemList[0].problemTitle) {
              this.problemList = this.problemList[0].problemTitle.split("#");
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      toPage() {
        this.$router.push("/problem");
      },
      inputBlur() {
        window.scrollTo(0, 0)
      },
      callPhone() {//唤起拨号
        window.location.href = 'tel://' + this.phoneNum
      },
      send() {
        if (this.value == "" || this.value == undefined) {
          this.$vux.toast.text("咨询的问题不能为空!", "middle");
        } else {
          this.problem = this.value;
          this.queryAnswer();
          setTimeout(() => {
            this.value = "";
            this.talk = true
          }, 100);
        }
      },
      queryAnswer() {//问题关键字搜索
        this.axios.get(baseUrl + "/customerser/query_problem_key?sgin=" + this.userSign + "&key=" + this.problem).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.answer = resultObj.data;
            let chat = {
              problem: this.problem,
              answer: this.answer,
            }
            this.chatList.push(chat);
            setSessionStore("chatList", JSON.stringify(this.chatList));
            this.$nextTick(() => {
              this.boxScroll(this.$refs.wrapper);
            });
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      boxScroll(o) {
        o.scrollTop = o.scrollHeight;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .service-wrap
    position: fixed
    bottom: 0
    wh(100%, 100%)
    background: rgba(235, 247, 255, 1)
    overflow: hidden
    .problem-box
      display: flex
      margin: 0 auto
      margin-top: 0.4rem
      margin-bottom: 0.613rem
      wh(94.4%, 3.413rem)
      background: rgba(255, 255, 255, 1)
      box-shadow: 0rem 0.04rem 0.227rem 0rem rgba(2, 31, 51, 0.24)
      border-radius: 0rem 1px 1px 0rem
      .bg-box
        wh(20.48%, 100%)
        bg-image("./bg.png", 100%, 100%)
      .problem-con
        display: flex
        flex-direction: column
        flex: 1
        margin-right: 0.32rem
        .title
          display: flex
          align-items: center
          flex: 1
          border-bottom: 0.013rem solid rgba(230, 230, 230, 1)
          margin-left: 0.267rem
          size-color(0.44rem, rgba(68, 68, 68, 1))
          &:last-child
            border-bottom: none
      .back-box
        margin-top: 1.427rem
        wh(0.52rem, 0.52rem)
        margin-right: 0.307rem
        margin-left: auto
        .back
          wh(100%, 100%)

    .problem-wrap
      position: fixed
      top: 4.426rem
      bottom: 1.35rem
      left: 0
      right: 0
      margin: auto
      width: 94.4%
      overflow-y: auto
      z-index: 88
      .problem-con
        display: flex
        margin-bottom: 0.28rem
        .icon1
          margin-right: 0.2rem
          wh(0.947rem, 0.947rem)
        .problem
          position: relative
          margin-right: 0.16rem
          line-height: 0.627rem
          background: rgba(255, 255, 255, 1)
          box-shadow: 0rem 0.013rem 0.067rem 0rem rgba(8, 35, 54, 0.24)
          border-top-right-radius: 0.28rem
          border-bottom-left-radius: 0.28rem
          border-bottom-right-radius: 0.28rem
          .word
            size-color(0.413rem, rgba(68, 68, 68, 1))
            padding: 0.28rem 0.32rem
          .blank-box
            position: absolute
            top: -0.065rem
            left: -0.24rem
            wh(0.253rem, 0.44rem)
            .left
              wh(100%, 100%)
      .answer-con
        fj(flex-end, center)
        margin-bottom: 0.2rem
        .icon2
          margin-left: 0.2rem
          wh(0.947rem, 0.947rem)
        .answer
          position: relative
          margin-left: 0.16rem
          background: rgba(255, 255, 255, 1);
          box-shadow: 0rem 0.013rem 0.067rem 0rem rgba(8, 35, 54, 0.24);
          border-top-left-radius: 0.28rem
          border-bottom-left-radius: 0.28rem
          border-bottom-right-radius: 0.28rem
          line-height: 0.627rem
          background: rgba(60, 175, 255, 1)
          .word
            size-color(0.413rem, rgba(255, 255, 255, 1))
            padding: 0.28rem 0.32rem
          .blue-box
            position: absolute
            top: -0.05rem
            right: -0.23rem
            wh(0.253rem, 0.44rem)
            .right
              wh(100%, 100%)
    .speak-box
      position: fixed
      bottom: 0.2rem
      left: 0
      right: 0
      margin: auto
      display: flex
      wh(94.4%, 0.92rem)
      .search-con
        display: flex
        align-items: center
        background: rgba(255, 255, 255, 1)
        border-radius(0.453rem)
        wh(75.28%, 0.92rem)
        .content
          width: 80%
          margin-left: 0.893rem
          height: 0.6rem
          line-height: 0.6rem
          size-color(0.387rem, rgba(146, 146, 146, 1))
        .icon
          position: absolute
          left: 0.28rem
          top: 0
          bottom: 0
          margin: auto
          wh(0.4rem, 0.387rem)
      .btn-box
        fj(center, center)
        margin-left: auto
        wh(19.91%, 0.92rem)
        background: rgba(60, 175, 255, 1)
        border-radius(0.453rem)
        size-color(0.387rem, rgba(255, 255, 255, 1))
    .mobile-box
      position: fixed
      bottom: 1.787rem
      right: 0.427rem
      z-index: 99
      wh(1.04rem, 1.04rem)
      border-radius(50%)
      .mobile
        wh(100%, 100%)
</style>
